<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>CSS布局-grid网格布局</title>  
    <style>  
        h3 {  
            width: 500px;       
            margin: 20px auto;  
        }  
        .container {  
            width: 500px;  
            margin: 20px auto;  
            border: 1px solid black;  
            display: grid;  
        }  
        .item {  
            font-size: 4em;  
            text-align: center;  
            border: 1px solid red;  
        }  
    </style>  
</head>  
<body>  
    <h3>1. 绝对尺寸: grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px;</h3>  
    <div class="container" style="gap: 10px 20px; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(2, 100px);">  
        <div class="item">1</div>  
        <div class="item">2</div>  
        <div class="item">3</div>  
        <div class="item">4</div>  
    </div>  
  
    <h3>2. 相对尺寸: grid-template-columns: 100px 1fr 2fr; grid-template-rows: 100px 100px;</h3>  
    <div class="container" style="grid-template-columns: 100px 1fr 2fr; grid-template-rows: repeat(2, 100px);">  
        <div class="item">1</div>  
        <div class="item">2</div>  
        <div class="item">3</div>  
        <div class="item">4</div>  
    </div>  
  
    <h3>3. 自动尺寸: grid-template-columns: 100px auto auto; grid-template-rows: 100px 100px;</h3>  
    <div class="container" style="grid-template-columns: 100px auto auto; grid-template-rows: repeat(2, 100px);">  
        <div class="item">1</div>  
        <div class="item">2</div>  
        <div class="item">3</div>  
        <div class="item">4</div>  
    </div>  
  
    <h3>4. 项目属性: grid-row: 1/4 (跨行); grid-column: 2/5 (跨列)</h3>  
    <div class="container" style="height: 300px; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(2, 100px);">  
        <div class="item" style="grid-row: 1/4;">1</div>  
        <div class="item">2</div>  
        <div class="item" style="grid-column: 2/5;">3</div>  
        <div class="item">4</div>  
    </div>  
  
    <h3>5. 单元格的对齐方式: place-items: center center;</h3>  
    <div class="container" style="place-items: center center; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px);">  
        <div class="item">Centered Item</div>  
    </div>  
</body>  
</html>